<template>
    <div class="card">
        <div class="card-header">
            <h5 class="card-title">{{opt == "create" ? '添加自定义信息' : '修改自定义信息'}}</h5>
        </div>
        <img class="card-img-top" :src="image.baseInfo.src" :alt="image.baseInfo.src">
      <div class="card-body">
        <div class="form-group">
            <div class="form-group">
                <label for="extendInfo-name">Title</label>
                <input type="text" id="extendInfo-name" :class="{
                    'form-control': !succeed,
                    'form-control-plaintext': succeed
                }" placeholder="标题" v-model="title" :disabled="waiting || succeed">
            </div>
            <div class="form-group">
                <label for="extendInfo-content">Content</label>
                <textarea id="extendInfo-content" :class="{
                    'form-control': !succeed,
                    'form-control-plaintext': succeed
                }" placeholder="内容" v-model="content" :disabled="waiting || succeed" style="resize:none" rows="3"></textarea>
            </div>
        </div>
      </div>
      <div class="card-footer d-flex justify-content-end">
        <div class="btn btn-sm btn-danger mr-auto" v-if="opt == 'update'" :class="{disabled: waiting || succeed}" @click.prevent="onremove(image, resultInfo)">删除</div>
        <button class="btn btn-sm btn-danger mr-2" :disabled="waiting || !content.length" @click.prevent="send" v-if="!waiting && resolved && !succeed">重试</button>
        <button class="btn btn-sm btn-success mr-2" :disabled="waiting || !content.length" @click.prevent="$emit('close')" v-if="!waiting && resolved && succeed">完成</button>
        <button class="btn btn-sm btn-primary mr-2" :disabled="!modified || waiting || !content.length" @click.prevent="send" v-if="!resolved">确定</button>
        <button class="btn btn-sm mr-2" @click.prevent="$emit('close')" v-if="!resolved || !succeed" :disabled="waiting">取消</button>
      </div>
    </div>
</template>

<script type="text/javascript">
import thumbImg from './thumb-img'
export default {
    name: 'extend-info-adder',
    components: {thumbImg},
    props: {
        image: {
            type: Object,
            required: true
        },
        info: {
            type: Object,
            default: null
        },
        onremove: {
            type: Function,
            default: function(image, obj) {
                console.log('unhandled remove extendInfo', obj, 'for: ', image);
            }
        },
        onupdate: {
            type: Function,
            default: function(image, obj) {
                console.log(`unhandled updating extendInfo`, obj, 'for: ', image);
            }
        },
        oncreate: {
            type: Function,
            default: function(image, obj) {
                console.log(`unhandled creating extendInfo`, obj, 'for: ', image);
            }
        }
    },
    data() {
        return {
            title: this.info ? this.info.title : "无",
            content: this.info ? this.info.content : "",
            waiting: false,
            resolved: false,
            succeed: false,
        }
    },
    computed: {
        opt() {
            return this.info ? "update" : "create"
        },
        modified() {
            return this.info ? this.content != this.info.content : true;
        },
        resultInfo() {
            var {title, content, info} = this;
            return Object.assign({}, info || {}, {title, content});
        }
    },
    methods: {
        send() {
            this.opt == 'update' ? this.onupdate(this.image, this.resultInfo) :
                              this.oncreate(this.image, this.resultInfo);
        }
    }
}
</script>

<style type="text/css">
    
</style>